import { defineComponent, ref, reactive, watch } from 'vue'

export default defineComponent({
  name: 'Radio',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: 'default'
    },
    checked: {
      type: Number,
      default: 0
    }
  },
  emit: ['change'],
  setup(props, { emit, slots }) {
    const { list, size } = props
    const active = ref(0)
    watch(
      () => props.checked,
      (v) => {
        active.value = v
      },
      { immediate: true }
    )
    const handleChange = (v: number) => {
      console.log('change', v)
      emit('change')
    }
    const renderDefault = () => (
      <>
        {list.map((item, index) => (
          <elRadioButton label={index} vSlots={{ default: () => item }} />
        ))}
      </>
    )
    return () => (
      <elRadioGroup
      style="min-width:fit-content"
        vModel={active.value}
        size={size}
        onChange={handleChange}
        vSlots={{
          default: () => renderDefault()
        }}
      />
    )
  }
})
